<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>

<script src="../js/vue.js"></script>
<script>

  // 自定义局部指令
  const myDirective = {
    focus: {
      mounted(el){
        el.focus();
      }
    }
  };
  // 1.创建Vue的实例对象
  const app = Vue.createApp({
    data(){
      return {
        message: '你好Vue3!',
      }
    },
    // 挂载局部指令
    directives: myDirective,

    template:`
        <!--使用自定义指令 v-focus-->
        <input placeholder="请输入姓名" v-focus>
      `
  });

  app.mount('#app');
</script>
</body>
</html>